<template>
  <section>
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <div class="pb-12 md:pb-20">
        <div class="lg:flex lg:justify-between">
          <!-- Main content -->
          <div class="lg:grow" data-aos="fade-down" data-aos-delay="200">
            <!-- Section title -->
            <h4 class="h3 font-red-hat-display mb-8">
              <template v-if="queryParams.type === undefined">
                Latest
              </template>
              <template v-if="queryParams.type === '0'">
                Default
              </template>
              <template v-if="queryParams.type === '1'">
                Technical Support
              </template>
              <template v-if="queryParams.type === '2'">
                Companies
              </template>
            </h4>

            <!-- Articles container -->
            <div class="grid gap-12 sm:grid-cols-2 sm:gap-x-6 md:gap-y-8 items-start">
              <article class="flex flex-col h-full" v-for="(item, index) in blogList" :key="index">
                <header>
                  <router-link
                    class="block mb-4"
                    :to="{ name: 'BlogPost', params: { id: item.id } }"
                  >
                    <figure class="relative h-0 pb-9/16">
                      <img
                        class="absolute inset-0 w-full h-full object-cover"
                        :src="baseUrl + item.coverImg"
                        width="352"
                        height="198"
                        alt="News 06"
                      />
                    </figure>
                  </router-link>
                  <router-link
                    class="hover:underline"
                    :to="{ name: 'BlogPost', params: { id: item.id } }"
                  >
                    <h3 class="h4 font-red-hat-display mb-2">
                      {{ item.title }}
                    </h3>
                  </router-link>
                </header>
                <p class="text-gray-600 dark:text-gray-400 grow">{{ item.subtitle }}</p>
                <footer class="flex items-center mt-4">
                  <div class="text-sm text-gray-500">
                    <span class="text-gray-500">{{ formatDate(item.createTime) }}</span>
                  </div>
                </footer>
              </article>
            </div>
          </div>

          <!-- Sidebar -->
          <aside
            class="relative mt-12 lg:mt-0 lg:w-64 lg:ml-16 lg:shrink-0"
            data-aos="fade-down"
            data-aos-delay="400"
          >
            <!-- Popular posts -->
            <div class="mt-16 mb-8 text-red-650">
              <ul class="-my-3">
                <li class="flex py-3">
                  <article>
                    <button class="hover:underline" @click="getBlogs('1')">
                      <h3 class="font-bold tracking-normal mb-1">
                        Technical Support
                      </h3>
                    </button>
                  </article>
                </li>
                <li class="flex py-3">
                  <article>
                    <button class="hover:underline" @click="getBlogs('2')">
                      <h3 class="font-bold tracking-normal mb-1">
                        Companies
                      </h3>
                    </button>
                  </article>
                </li>
                <li class="flex py-3">
                  <article>
                    <button class="hover:underline" @click="getBlogs('0')">
                      <h3 class="font-bold tracking-normal mb-1">
                        Default
                      </h3>
                    </button>
                  </article>
                </li>
                <li class="flex py-3">
                  <article>
                    <button class="hover:underline" @click="getBlogs()">
                      <h3 class="font-bold tracking-normal mb-1">
                        Latest
                      </h3>
                    </button>
                  </article>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { useDateFormat } from '@vueuse/core'

const blogList = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API

const queryParams = ref({
  pageNum: 1,
  pageSize: 8,
  status: 0,
});

const fetchBlogs = async () => {
  try {
    const response = await axios.get(baseUrl + '/web/blogs/list', {
      params: queryParams.value
    })
    blogList.value = response.data.rows // 更新数据
  } catch (error) {
    console.error(error)
  }
}

const getBlogs = (type) => {
  queryParams.value.type = type
  fetchBlogs()
}

// 格式化时间
const formatDate = (date) => {
  return useDateFormat(date, 'MMM DD, YYYY', { locales: 'en-US' })
}

onMounted(() => {
  fetchBlogs()
})
</script>

<style scoped></style>
